<template>
  <view class="my">
    <view class="bg_container">
      <view class="text_con">
        <text class="first_text">OUCA</text>
        <text class="second_text">Slogan</text>
      </view>
      <img src="../../static/Umbrella.png" alt="" class="umb">
      <img src="../../static/wave.png" alt="" class="wave1">
      <img src="../../static/wave.png" alt="" class="wave2">
    </view>
    <view class="chose_list">
      <view class="person">
        <view class="person_info" @click="getUserProfile()">
          <img :src="not_log.imgurl" alt="" class="pic">
          <text>{{not_log.msg}}</text>
          <button type="default" @click="changeInfo()">修改信息</button>
        </view>
        <view class="person_btn">
          <view class="fabu" @click="gotoMyNews()">
            <img src=".../../static/up.png" alt="">
            <view class="btn_text">我的发布</view>
          </view>
          <view class="fabu" @click="gotoLikes">
            <img src=".../../static/sub.png" alt="">
            <view class="btn_text">我的关注</view>
          </view>
          <view class="fabu" @click="pop_open()">
            <img src=".../../static/shuoming.png" alt="">
            <view class="btn_text">使用说明</view>
          </view>
        </view>
      </view>
      <view class="my_sub alert">
        <img src="../../static/alert.png" alt="" class="left_icon">
        <text>活动提醒</text>
        <switch :checked="switchBtn" @change="changeSwitch()" color='#1684FC' />
      </view>
      <view class="my_sub pushAct" @click="dialogToggle('error')">
        <img src="../../static/fabu.png" alt="" class="left_icon">
        <text>发布活动</text>
        <img src="../../static/right.png" alt="" class="right_icon">
      </view>
      <view class="my_sub bangding" @click="logout()">
        <img src="../../static/link.png" alt="" class="left_icon">
        <text>退出登录</text>
        <img src="../../static/right.png" alt="" class="right_icon">
      </view>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="center_popup">
        使用说明：
        欢迎使用活动宣传小程序OUCA，祝您使用愉快！<br>

        1. 怎样快速找到自己关注的活动？<br>
        在浏览活动时您可以选择订阅某一活动或活动发布方，订阅后可以在主页的订阅模块中找到相关内容。<br>
        2. 怎样查看近期发布的活动、通知等？<br>
        我们在主页设置了推荐的功能，推荐的往往是近期发布的比较重要的活动，另外，如果想要查找某个活动，还可以通过主页左上角的搜索按钮进行搜索。<br>
        3. 如果想要查看不同类别的活动怎么办？<br>
        我们专门又一个分类模块，在该模块中可以系统地查看学院、社团、竞赛或运动、招聘等相关活动。<br>
        4. 发布活动应该怎么操作？<br>
        点击主页右下角的个人中心，选择发布活动，若没有权限，先提交发布活动申请，审核通过后进行活动的发布；若有发布权限，则可以选择链接发布或直接发布。<br>
        5. 为什么发布活动要申请权限？<br>
        规范化活动的发布，防止一些没有意义的活动出现，为广大师生提供安全、和谐的活动宣传、发布小程序。<br>
      </view>
    </uni-popup>
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="success" :message="messageText" :duration="2000"></uni-popup-message>
    </uni-popup>
    <uni-popup ref="alertDialog1" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="现在获取" title="抱歉" content="您尚未拥有发布授权"
        @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="alertDialog2" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="立即登录" title="抱歉" content="您尚未登录"
        @confirm="getUserProfile()" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="alertDialog3" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="您将开启通知权限" content="开启后会推送您订阅提醒的消息"
        @confirm="" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        tagTypeNot0:false,
        switchBtn: false,
        messageText: "您已成功退出登录！",
        is_empower: false,
        is_log: false,
        user_info: {},
        not_log: {
          imgurl: "../../static/xiaohai.jpg",
          msg: "点击登录"
        }
      };
    },
    onShow() {
      this.is_empower = JSON.parse(uni.getStorageSync('is_empower') || false);
      this.is_log = JSON.parse(uni.getStorageSync('is_log') || false);
      this.switchBtn = JSON.parse(uni.getStorageSync('is_notice') || false);
      if (this.is_log) {
        this.user_info = JSON.parse(uni.getStorageSync('user_info') || false);
        this.not_log.imgurl = this.user_info.avatarUrl;
        this.not_log.msg = this.user_info.nickName;
        if(uni.getStorageSync('changeInfo')){
          console.log("修改过信息了");
          this.not_log.msg=JSON.parse(uni.getStorageSync('changeInfo')).nickname
          this.getLOGO()
        }
      }
      console.log("is_empower", this.is_empower);
      this.ToExamine()
    },
    methods: {
      gotoLikes() {
        if (!this.is_log) {
          this.$refs.alertDialog2.open()
        } else {
          uni.navigateTo({
            url: '../../subpkg/my_likes/my_likes'
          })
        }
      },
      async ToExamine() {
        const {
          data: res
        } = await uni.$http.get("/self/info")
        if (res.code != 1000) return uni.$showMsg()
        if(res.data.tag_type!=0){
          this.tagTypeNot0=true
          uni.setStorageSync('tag',res.data.tag_type)
        }
      },
      async getLOGO() {
        // const query = {
        //   img_id:uni.getStorageSync('logo')
        // }
        // const {
        //   data: res
        // } = await uni.$http.post("/self/avatar-upload", query)
        // if (res.code != 1000) return uni.$showMsg()
        this.not_log.imgurl = uni.getStorageSync('logo_url');
      },
      gotoMyNews() {
        this.is_empower = JSON.parse(uni.getStorageSync('is_empower') || false);
        if (!this.is_log) {
          this.$refs.alertDialog2.open()
        } else if (!this.is_empower) {
          this.$refs.alertDialog1.open()
        } else {
          uni.navigateTo({
            url: "../../subpkg/my_news/my_news"
          })
        }
      },
      logout() {
        if (this.is_log) {
          this.not_log = {
            imgurl: "../../static/xiaohai.jpg",
            msg: "点击登录"
          }
          uni.setStorageSync('is_log', JSON.stringify(false));
          uni.removeStorageSync('user_info');
          this.messageText="您已成功退出登录！"
          this.$refs.message.open()
          this.is_log = false
        }
      },
      checkToken() {
        uni.checkSession({
          success() {
            //session_key 未过期，并且在本生命周期一直有效
          },
          fail() {
            // session_key 已经失效，需要重新执行登录流程
            this.logout()
            this.getUserProfile()
          }
        })
      },
      changeInfo(){
        this.is_empower = JSON.parse(uni.getStorageSync('is_empower') || false);
        if (!this.is_log) {
          this.$refs.alertDialog2.open()
        } else if (!this.is_empower) {
          this.$refs.alertDialog1.open()
        } else {
          uni.navigateTo({
            url: "../../subpkg/changeInfo/changeInfo"
          })
        }
      },
       async getToken(info) {
          // 调用微信登录接口
          const [err, res] = await uni.login().catch(err => err)
          // 判断是否 uni.login() 调用失败
          if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')
      
          // 准备参数对象
          const query = {
            code: res.code,
          }
          // 换取 token
          const { data: loginResult } = await uni.$http.post('/reglog/wx-login', query)
          // if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')
      
          // 2. 更新 本地 中的 token
          console.log(loginResult.data.token);
          uni.setStorageSync('token', loginResult.data.token);
        },
      async getUserProfile(e) {
        // 判断缓存中是否有userinfo，如果没有userinfo
        // 弹出授权窗口，获取用户信息
        if (!this.is_log) {
          uni.getUserProfile({
            desc: '用于完善用户信息',
            success: (res) => {
              console.log(res);
              this.user_info = res.userInfo;
              console.log(this.user_info);
              this.not_log.imgurl = this.user_info.avatarUrl;
              this.not_log.msg = this.user_info.nickName;
              this.is_log = true;
              uni.setStorageSync('is_log', JSON.stringify(true));
              uni.setStorageSync('user_info', JSON.stringify(this.user_info))
              this.messageText = "您已成功登录"
              this.$refs.message.open()
              // this.wexlogin()
              this.getToken()
            },
            // 如果用户拒绝了登录授权
            fail: () => {
              return uni.$showMsg("您拒绝了登录授权")
            }
          })
        }
      },
      changeSwitch() {
        this.switchBtn = !this.switchBtn
        if (this.switchBtn) {
          this.$refs.alertDialog3.open()
          uni.setStorageSync('is_notice', JSON.stringify(true))
        } else {
          uni.setStorageSync('is_notice', JSON.stringify(false))
        }
      },

      pop_open() {
        this.$refs.popup.open('center')
      },
      dialogToggle(type) {
        this.msgType = type
        if (this.is_empower) {
          console.log("已授权");
          if(this.tagTypeNot0){
            if(uni.getStorageSync('changeInfo')){
              uni.navigateTo({
                url: '../../subpkg/release/release'
              })
            }else{
              this.messageText = "请先修改信息"
              this.$refs.message.open()
            }
          }else{
            this.messageText = "请耐心等待审核哦"
            this.$refs.message.open()
          }
        } else {
          if (!this.is_log) {
            this.$refs.alertDialog2.open()
          } else {
            this.$refs.alertDialog1.open()
          }
        }
      },
      dialogConfirm() {
        console.log("授权");
        uni.navigateTo({
          url: '../../subpkg/empower/empower'
        })
      },
    },
  }
</script>

<style lang="scss">
  .my {
    .center_popup {
      padding: 10px;
      background-color: #fff;
    }

    .chose_list {
      display: flex;
      justify-content: center;
      position: relative;

      .person {
        position: absolute;
        top: -60px;
        width: 342px;
        height: 180px;
        background-color: #fff;
        border: 1px solid rgba(187, 187, 187, 100);
        border-radius: 10px;

        .person_info {
          display: flex;
          align-content: center;
          .pic {
            width: 69px;
            height: 69px;
            border-radius: 50%;
            margin-top: 16px;
            margin-left: 27px;
          }

          text {
            font-size: 18px;
            margin-left: 23px;
            line-height: 100px;
          }
          button{
            height: 35px;
            margin-top: 32px;
            font-size: 15px;
            font-weight: lighter;
            line-height: 35px;
            background-color: #1684fc;
            color: white;
          }
        }

        .person_btn {
          display: flex;
          justify-content: space-between;
          padding: 0 20px;
          border-top: 1px solid rgba(187, 187, 187, 100);
          align-content: center;
          padding-top: 12px;

          image {
            width: 30px;
            height: 30px;
          }

          .fabu {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 70px;

            .btn_text {
              text-align: center;
              margin-top: 2px;
            }
          }
        }
      }

      .my_sub {
        width: 343px;
        height: 63px;
        border-radius: 10px;
        background-color: #fff;
        position: absolute;
        display: flex;
        align-items: center;
        top: 52px;
        border: 1px solid rgba(187, 187, 187, 100);

        .left_icon {
          width: 22px;
          height: 22px;
          margin-left: 13px;
        }

        text {
          font-size: 18px;
          line-height: 63px;
          margin-left: 100px;
          margin-right: 100px;
          text-align: center;
        }

        .right_icon {
          width: 22px;
          height: 22px;
          margin-right: 13px;
        }
      }

      .alert {
        top: 125px;

        text {
          margin-right: 78px;
        }
      }

      .pushAct {
        top: 198px;
      }

      .bangding {
        top: 271px;
      }
    }

    .bg_container {
      background-color: #1684FC;
      height: 170px;
      position: relative;
    }

    .text_con {
      position: absolute;
      left: 54rpx;
      top: 45px;

      .first_text {
        font-size: 24px;
        border-right: 3px white solid;
        padding-right: 3px;
        color: white;
      }

      .second_text {
        color: white;
        padding-left: 3px;
      }
    }

    .umb {
      width: 31px;
      height: 31px;
      position: absolute;
      left: 632rpx;
      top: 21px;
    }

    .wave1 {
      height: 40px;
      width: 40px;
      position: absolute;
      left: 518rpx;
      top: 53px
    }

    .wave2 {
      position: absolute;
      height: 40px;
      width: 40px;
      left: 606rpx;
      top: 53px;
    }
  }
</style>
